/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

// IIFE - Immediately Invoked Function Expression
(function (mycode) {

    // The global jQuery object is passed as a parameter
    mycode(window.jQuery, window, document);

}(function ($, window, document) {

    // The $ is now locally scoped

    // Listen for the jQuery ready event on the document
    $(initPage); // or $(document).ready(initPage);    
    function initPage() {

        console.log('The DOM is ready');

        // The DOM is ready!

        // Cache our DOM elements like good citizens.
        var $dom = {
            $reset: $("input#reset"),
            $start: $("input#start"),
            $halt: $("input#halt"),
            $box1: $("div#box1"),
            $box2: $("div#box2")
        };

        // Reset the demo by quitting all animations and manually
        // setting the widths.
        $dom.$reset.click(
                function (event) {
                    $dom.$box1.add($dom.$box2)
                            .stop(true, true)
                            .width(0)
                            .offset({left: 9});
                }
        );

        // Start animations on both elements. The animations will
        // include a slide-out followed by a slide-in of each element.
        // Meaning, there are two different animations in the queue at
        // the start of the experiment.
        $dom.$start.click(
                function (event) {
                    $dom.$box1.add($dom.$box2)
                            .animate({left: "+=250px", width: "+=400px"}, 3000)
                            .animate({left: "-=250px", width: "-=400px"}, 2000);
                }
        );

        // Stop both animations.
        $dom.$halt.click(
                function (event) {
                    // True ( clear queue, jump to end ).
                    $dom.$box1.stop();
                    $dom.$box2.finish();
                }
        );
    }
    console.log('The DOM may not be ready');

    // The rest of code goes here!

}));